<template>
  <div>
    <Drawer
      width="50%"
      title="编辑组件标签"
      placement="right"
      v-model:visible="visible"
      :footer-style="{ textAlign: 'right' }"
      @close="onClose"
      :destroy-on-close="true"
    >
      <template #closeIcon>
        <arrow-left-outlined />
      </template>
      <Card>
        <Form :model="formState" ref="formRef">
          <Row :gutter="16">
            <Col span="12">
              <FormItem label="组件名称" name="compoName">
                {{ componentName }}
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="命名空间" name="namespace">
                {{ namespace }}
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="12">
              <FormItem label="应用名称" name="appName">
                {{ appName }}
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem
                label="链路名称"
                name="linkLabels"
                :rules="[{ required: true, message: '链路名不能为空', trigger: 'blur' }]"
              >
                <Select
                  v-model:value="formState.linkLabels"
                  :options="routeLinkKeyList"
                  mode="multiple"
                  placeholder="请选择"
                >
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col span="12">
              <FormItem label="版本" name="version">
                {{ version }}
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Card>
      <template #footer>
        <Button style="margin-right: 8px" type="primary" @click="submit">提交</Button>
        <Button @click="onClose">取消</Button>
      </template>
    </Drawer>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import { Card, Row, Col, Form, FormItem, Button, Select, Drawer, message } from 'ant-design-vue';
import { editTag, getRouteLink } from '/@/api/upgrade-center/grayscale/tagManagement/tagManagement';
const visible = ref(false);
const formRef = ref();
const formState = reactive({
  linkLabels: [],
});
const componentName = ref();
const namespace = ref();
const appName = ref();

const version = ref();
const id = ref();
const deployment = ref();
const routeLinkKeyList = ref();
const getRouteLinkList = async () => {
  routeLinkKeyList.value = await getRouteLink();
};
getRouteLinkList();
const openEdit = (record) => {
  let res = record.linkLabels.map((item) => {
    return {
      label: item.name,
      value: item.routeLinkKey,
    };
  });
  appName.value = record.appName;
  namespace.value = record.namespace;
  componentName.value = record.componentName;
  version.value = record.version;
  formState.linkLabels = res;
  id.value = record.id;
  deployment.value = record.deployment;
  visible.value = true;
};
const onClose = () => {
  formState.linkLabels = [];
  namespace.value = undefined;
  appName.value = undefined;
  componentName.value = undefined;
  version.value = undefined;
  visible.value = false;
};
const emit = defineEmits(['get']);
const submit = async () => {
  formRef.value.validate().then(async () => {
    let linkLabelNames = [];

    formState.linkLabels.forEach((item) => {
      if (item.value) {
        linkLabelNames.push(item.value);
      } else {
        linkLabelNames.push(item);
      }
    });

    let editParam = {
      id: id.value,
      linkKeyList: linkLabelNames,
      deployment: deployment.value,
    };
    let res = await editTag(editParam);
    if (res) {
      message.success(res);
    }
    emit('get');
    onClose();
  });
};
defineExpose({ openEdit });
</script>
